<template>
  <el-card class="introduce">
    <div class="order">
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>轮播图数量</span>
          </div>
        </template>
        <div class="item">{{ state.swiperData }}</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>页数</span>
          </div>
        </template>
        <div class="item">{{ state.totalPage }}</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>每页数量</span>
          </div>
        </template>
        <div class="item">{{ state.pageNum }}</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>用户总计</span>
          </div>
        </template>
        <div class="item">{{ state.userTotal }}</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>每页数量</span>
          </div>
        </template>
        <div class="item">{{ state.pageNum }}</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>2022上半年</span>
          </div>
        </template>
        <div class="item">{{ state.fullyear }}</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>未锁定的账号</span>
          </div>
        </template>
        <div class="item">{{ state.userunloaced }}</div>
      </el-card>
    </div>
  </el-card>
  <el-card class="order-item">
    <div id="main">
    </div>
    <div id="main2"></div>
  </el-card>

</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, reactive, ref, onBeforeMount } from "vue";
import { formatTime } from "@/assets/utils";
import api from "@/http";
const state = reactive({
  pageSize: 10,
  pageNumber: 1,
  swiperData: 0,
  totalPage: 0,
  pageNum: 0,
  lockStatus: 1,
  userTotal: 0,
  userPage: 0,
  fullyear: 0,
  userunloaced: 0
});
onMounted(() => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  api.home.carousels(state.pageNumber, state.pageSize).then(res => {
    state.swiperData = res.data.totalCount
    state.totalPage = res.data.totalPage
    state.pageNum = res.data.pageSize
    option = {
      xAxis: {
        type: 'category',
        data: res.data.list.map(item => {
          return formatTime(item.createTime, '{0}-{1}-{2}')
        })
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: res.data.list.map(item => {
            return item.carouselId
          }),
          type: 'line'
        },
        {
          data: res.data.list.map(item => {
            return item.carouselId
          }),
          type: 'bar'
        }
      ],

    };

    option && myChart.setOption(option);
  })
  api.home.getUsers(state.pageNumber, state.pageSize).then(res => {
    console.log(res);
    state.userTotal = res.data.totalPage
    state.userPage = res.data.pageSize
    let result = res.data.list.filter(item => {
      return item.lockedFlag !== 1
    })
    state.userunloaced = result.length
    let month = res.data.list.map(item => {
      return formatTime(item.createTime, '{1}')
    })
    state.fullyear = month.length
    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    var option2;
    option2 = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '用户统计',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: state.userTotal, name: '用户总数' },
            { value: result.length, name: '未锁定数量' },
            { value: month.length, name: '2022年上半年' },
            { value: state.userPage, name: '每页数量' }
          ]
        }
      ]
    };
    option2 && myChart2.setOption(option2);
  })
})
</script>

<style lang="less" scoped>
#main {

  width: 800px;
  height: 500px;

}

#main2 {
  display: block;
  width: 500px;
  height: 500px;

}

.introduce .order {
  display: flex;
  margin-bottom: 50px;
}

.introduce .order .order-item {
  flex: 1;
  margin-right: 20px;
}

.introduce .order .order-item:last-child {
  margin-right: 0;
}

#box {
  width: 800px;
  height: 100px;

}
</style>